<template>
    <div class="block" ref="commentlist">
        <el-timeline>
            <el-timeline-item :timestamp="item.creationtime" placement="top" v-for="(item, index) in pageCommentL.list"
                :key="index">
                <el-row>
                    <el-col :span="2">
                        <el-avatar :size="40" src="@a/img/headportrait01.jpg" @error="errorHandler">
                            <img :src="item.photo | pictureUrl" />
                        </el-avatar>
                    </el-col>
                    <el-col :span="10">
                        <el-divider content-position="left">{{item.username}}
                        </el-divider>
                    </el-col>
                    <!-- 第一级评论 -->
                    <el-col :span="12">
                        <el-divider content-position="right">
                            <el-dropdown trigger="click">
                                <span class="el-dropdown-link">
                                    操作
                                    <i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-popover placement="left" width="360" v-model="item.replysVisible">
                                        <p>回复评论</p>
                                        <el-input type="textarea" v-model="replysTextarea" placeholder="请输入...">
                                        </el-input>
                                        <div style="text-align: right; margin: 0">
                                            <el-button size="mini" type="text" @click="item.replysVisible = false">
                                                取消
                                            </el-button>
                                            <el-button type="primary" size="mini" @click="replyComment(item)">确定
                                            </el-button>
                                        </div>
                                        <el-dropdown-item slot="reference">回复</el-dropdown-item>
                                    </el-popover>
                                    <!-- <el-dropdown-item>引用该评论</el-dropdown-item> -->
                                    <el-popover placement="top-start" width="160" v-model="item.replysDelVisible">
                                        <p>确定删除吗？</p>
                                        <div style="text-align: right; margin: 0">
                                            <el-button size="mini" type="text" @click="item.replysDelVisible = false">取消
                                            </el-button>
                                            <el-button type="primary" size="mini" @click="replyDel(item)">确定
                                            </el-button>
                                        </div>
                                        <el-dropdown-item slot="reference" v-if="isMyself">删除</el-dropdown-item>
                                    </el-popover>
                                    <!-- <el-popover placement="top-start" width="160" v-model="item.Visible">
                                        <p>确定删除吗？</p>
                                        <div style="text-align: right; margin: 0">
                                            <el-button size="mini" type="text" @click="item.replysDelVisible = false">取消
                                            </el-button>
                                            <el-button type="primary" size="mini">加黑禁言
                                            </el-button>
                                        </div>
                                        <el-dropdown-item slot="reference">加黑禁言</el-dropdown-item>
                                    </el-popover> -->
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-divider>
                    </el-col>
                </el-row>
                <!-- 第二级评论 -->
                <el-row>
                    <el-col :span="24">
                        <el-collapse accordion>
                            <el-collapse-item :title="item.content" :name="item.commentid">
                                <el-timeline>
                                    <el-timeline-item v-for="(itemIn, index) in item.replys" :key="index"
                                        icon="el-icon-more" type='primary' size="large">
                                        <el-row>
                                            <el-col :span="1" style="text-align: right;">
                                                <el-avatar :size="30" src="@a/img/headportrait01.jpg"
                                                    @error="errorHandler">
                                                    <img :src="itemIn.photo | pictureUrl" />
                                                </el-avatar>
                                            </el-col>
                                            <el-col :span="3">
                                                <span>{{itemIn.username}}回复:</span>
                                            </el-col>
                                            <el-col :span="1" style="text-align: right;">
                                                <el-avatar :size="30" src="@a/img/headportrait01.jpg"
                                                    @error="errorHandler">
                                                    <img :src="itemIn.replyphoto | pictureUrl" />
                                                </el-avatar>
                                            </el-col>
                                            <el-col :span="10">
                                                <span>{{itemIn.replyName || item.username}}</span>
                                            </el-col>
                                        </el-row>
                                        <span>{{itemIn.content}}</span>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-divider content-position="left">{{itemIn.creationtime}}
                                                </el-divider>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-divider content-position="right">
                                                    <el-dropdown trigger="click">
                                                        <span class="el-dropdown-link">
                                                            操作
                                                            <i class="el-icon-arrow-down el-icon--right"></i>
                                                        </span>
                                                        <el-dropdown-menu slot="dropdown">
                                                            <el-popover placement="left" width="360"
                                                                v-model="itemIn.replysVisible">
                                                                <p>回复评论</p>
                                                                <el-input type="textarea" v-model="replysTextarea"
                                                                    placeholder="请输入..."></el-input>
                                                                <div style="text-align: right; margin: 0">
                                                                    <el-button size="mini" type="text"
                                                                        @click="itemIn.replysVisible = false">取消
                                                                    </el-button>
                                                                    <el-button type="primary" size="mini"
                                                                        @click="replyComment(itemIn)">确定
                                                                    </el-button>
                                                                </div>
                                                                <el-dropdown-item slot="reference">回复
                                                                </el-dropdown-item>
                                                            </el-popover>
                                                            <el-popover placement="top-start" width="160"
                                                                v-model="itemIn.replysDelVisible">
                                                                <p>确定删除吗？</p>
                                                                <div style="text-align: right; margin: 0">
                                                                    <el-button size="mini" type="text"
                                                                        @click="itemIn.replysDelVisible = false">取消
                                                                    </el-button>
                                                                    <el-button type="primary" size="mini"
                                                                        @click="replyDel(itemIn)">确定
                                                                    </el-button>
                                                                </div>
                                                                <el-dropdown-item slot="reference" v-if="isMyself">删除
                                                                </el-dropdown-item>
                                                            </el-popover>
                                                            <!-- <el-popover placement="top-start" width="160"
                                                                v-model="itemIn.Visible">
                                                                <p>确定删除吗？</p>
                                                                <div style="text-align: right; margin: 0">
                                                                    <el-button size="mini" type="text"
                                                                        @click="itemIn.replysDelVisible = false">取消
                                                                    </el-button>
                                                                    <el-button type="primary" size="mini">加黑禁言
                                                                    </el-button>
                                                                </div>
                                                                <el-dropdown-item slot="reference">加黑禁言
                                                                </el-dropdown-item>
                                                            </el-popover> -->
                                                        </el-dropdown-menu>
                                                    </el-dropdown>
                                                </el-divider>
                                            </el-col>
                                        </el-row>
                                    </el-timeline-item>
                                </el-timeline>
                            </el-collapse-item>
                        </el-collapse>
                    </el-col>
                </el-row>
            </el-timeline-item>
        </el-timeline>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    import SiteNav from "@c/navigation/siteNav";
    export default {
        props:['articleMes'],
        components: {
            SiteNav
        },
        computed: {
            ...mapState({
                userInfo: state => state.userModule.userInfo,
                otherUserInfo: state => state.userModule.otherUserInfo,
            }),
            isMyself(){
                return this.userInfo.id == this.otherUserInfo.id
            }
        },
        created() {},
        mounted() {
        },
        beforeMount() {
            this.pageCommentlist()
        },
        data() {
            return {
                activeName: 1,
                src: require("@/assets/img/headportrait03.jpg"),
                content: "",
                requireData: {}, //anthor
                requirePL: {}, //评论
                pageCommentL: {},
                replysTextarea: '',
            };
        },
        methods: {
            // 删除评论
            replyDel(params) {
                params.replysDelVisible = false
                this.$store
                    .dispatch("commentModule/replyDel", {
                        ids: params.id,
                        userid: this.userInfo.id,
                    })
                    .then(res => {
                        if (res.data.code == 200) {
                            this.$message.success('删除成功')
                            this.pageCommentlist()
                        }
                    });
            },
            errorHandler(){

            },
            // 回复
            replyComment(params) {
                if (this.replysTextarea != '') {
                    params.replysVisible = false
                    this.$store
                        .dispatch("commentModule/addGive", {
                            commentid: params.commentid,
                            content: this.replysTextarea,
                            type: 0,
                            parentid: params.id,
                            userid: this.userInfo.id,
                            replyphoto: params.photo,
                            replyName: params.username || params.userName
                        })
                        .then(res => {
                            if (res.data.code == 200) {
                                this.$message.success('回复成功')
                                this.replysTextarea = ''
                                this.pageCommentlist()
                            }
                        });
                } else {
                    this.$message.success('请先输入回复内容！')
                }

            },
            // 查询评论列表
            pageCommentlist() {
                var id=''
                if(this.$route.query.id){
                    id=this.$route.query.id
                }else if(this.articleMes.id){
                    id=this.articleMes.id
                }else{
                    id = this.$route.query.articleMes.id
                }
                this.$store
                    .dispatch("commentModule/pageCommentlist", {
                        id: id,
                    })
                    .then(res => {
                        if (res.data.code == 200) {
                            this.pageCommentL = res.data.result
                            var replyTotals = 0
                            if(res.data.result.total > 0){
                                this.pageCommentL.list.map(item =>{
                                    if(item.replys && item.replys.length > 0){
                                        replyTotals += item.replys.length
                                    }
                                })
                            }
                            this.$emit('setComment',res.data.result.total,replyTotals+res.data.result.total)
                        }
                    });
            },
            // 加载更多时有用
            pageCommentlistReply(params) {
                params.replysVisible = false
                this.$store
                    .dispatch("commentModule/replyComment", {
                        id: 6
                    })
                    .then(res => {
                        if (res.data.code == 200) {}
                    });
            },
        }
    };
</script>

<style lang="scss" scoped>
    .textEllipsis{
        overflow: hidden; 
        text-overflow:ellipsis; 
        white-space: nowrap;
    }
        .avatar {
        float: left;
    }

    .block {
        text-align: left;
    }
</style>